<script setup lang="ts">
import { UpdateRobotNPC_BASE_LAW } from "@/api/cloud"
import { generateRule } from "@/utils"
import { ElMessage, type FormInstance, type FormRules } from "element-plus"
import PubSub from "pubsub-js"
import { reactive, ref } from "vue"
import { IntelligentDataProps } from "../index.vue"

interface InterFormProps {
  id: string
  voice_id: string
  gender: string
  age: string
  profession: string
  opening_remarks: string
  hobby: string
  character_text: string
  system: string
}

interface InterDataProps {
  category: string
  interData: IntelligentDataProps
}

const props = defineProps<InterDataProps>()
const interFormRef = ref<FormInstance>()
const submitLoading = ref<boolean>(false)
const interForm = reactive<InterFormProps>({
  id: String(props.interData.id),
  voice_id: String(props.interData.voice_id),
  gender: Number(props.interData.gender) === 1 ? "男" : "女",
  age: props.interData.age,
  profession: props.interData.profession,
  opening_remarks: props.interData.opening_remarks,
  hobby: props.interData.hobby,
  character_text: props.interData.character_text,
  system: props.interData.system
})

const rules = reactive<FormRules<InterFormProps>>({
  id: generateRule("robot_id"),
  // voice_id: generateRule('声音ID'),
  gender: generateRule("性别"),
  age: generateRule("年龄"),
  profession: generateRule("职业"),
  opening_remarks: generateRule("开场白"),
  hobby: generateRule("爱好"),
  character_text: generateRule("性格"),
  system: generateRule("训练参数")
})

const genderList = ref([
  { id: 1, label: "男" },
  { id: 0, label: "女" }
])

const handleCancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleOnSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        submitLoading.value = true
        PubSub.publish("CONFORM_LOADING")
        const dataForm = {
          ...interForm,
          id: Number(interForm.id),
          voice_id: Number(interForm.voice_id) ?? 0,
          gender: interForm.gender === "女" ? 0 : 1,
          age: Number(interForm.age)
        }
        const result = await UpdateRobotNPC_BASE_LAW(String(props.category).toLocaleLowerCase(), dataForm)
        if (result.code === 200) {
          ElMessage({
            type: "success",
            message: "修改成功"
          })
          // PubSub.publish('UPDATE_SINGLE_ROBOT')
          // formEl.resetFields()
        } else {
          ElMessage({
            type: "error",
            message: result.error || "提交失败"
          })
        }
      } catch (error) {
        console.error(error)
      } finally {
        submitLoading.value = false
      }
    } else {
      console.log("error submit!", fields)
    }
  })
}
</script>

<template>
  <div class="inter-form" v-loading="submitLoading">
    <el-form ref="interFormRef" :model="interForm" :rules="rules" label-position="top" size="default" status-icon>
      <el-form-item label="id" prop="id">
        <el-input disabled type="number" v-model="interForm.id" placeholder="请输入ID" />
      </el-form-item>
      <!-- <el-form-item label="声音ID" prop="voice_id">
        <el-input type="number" v-model="interForm.voice_id" placeholder="请输入声音ID" />
        </el-form-item>  -->
      <el-form-item label="性别" prop="gender">
        <el-select v-model="interForm.gender" placeholder="请选择性别" :style="{ width: '100%' }">
          <el-option v-for="item in genderList" :key="item.id" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input type="number" v-model="interForm.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="职业" prop="profession">
        <el-input v-model="interForm.profession" placeholder="请输入职业" />
      </el-form-item>
      <el-form-item label="开场白" prop="opening_remarks">
        <el-input v-model="interForm.opening_remarks" placeholder="请输入开场白" />
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input v-model="interForm.hobby" placeholder="请输入爱好" />
      </el-form-item>
      <el-form-item label="性格" prop="character_text">
        <el-input v-model="interForm.character_text" placeholder="请输入性格" />
      </el-form-item>

      <el-form-item label="训练脚本" prop="system">
        <el-input v-model="interForm.system" type="textarea" placeholder="请输入训练脚本" />
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" :loading="submitLoading" @click="handleOnSubmit(interFormRef)" border="none">
          提交
        </el-button>
        <el-button border="none" @click="handleCancel(interFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.inter-form {
  width: 100%;
  height: 100%;

  .btn {
    padding-bottom: 30px;
  }
}
</style>
